import React, { useEffect, useState } from "react";
import Image1 from "../../../public/a.svg";
import Image2 from "../../../public/s.svg";
import "./index.less";

function Item({ data, selected, onClick }) {
    return (
        <div className="six-button-item center">
            <div className="six-button-label center">
                {data.icon}
                {data.label}
            </div>
            {selected ? <Image2 className="six-button-image2" /> : <Image1 className="six-button-image1" onClick={onClick} />}
        </div>
    );
}

export default ({ data, defaultValue, onMenuClick }) => {
    let [currentIndex, setCurrentIndex] = useState("");
    useEffect(() => {
        setCurrentIndex(defaultValue);
    }, []);
    return (
        <div className="six-button">
            {data.map((el, index) => {
                return (
                    <Item
                        key={el.value}
                        data={el}
                        selected={currentIndex == el.value}
                        onClick={() => {
                            setCurrentIndex(el.value);
                            onMenuClick(
                                {
                                    label: el.label,
                                    value: el.value,
                                },
                                index
                            );
                        }}></Item>
                );
            })}
        </div>
    );
};
